<!-- 监听预约记录 -->
<template>
  <div class="ky-container" @click="appoInfoDlgClose">
    <el-card shadow="hover" class="ky-card ky-card-xs ky-card-hdbg">
      <el-form ref="formSearch" :model="formData" :inline="true" class="ky-form-inline ky-form-ipt-width ky-form-inline-sm" label-width="80px">
        <el-form-item label="医院名称" prop="hospitalCode">
          <el-select size="small" filterable v-model="formData.hospitalCode" placeholder="请选择">
            <el-option
              v-for="(item,index) in mx_hospitalList"
              :key="index"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="患者类型" prop="patType">
          <el-select size="small" v-model="formData.patType" placeholder="请选择" clearable>
            <el-option
              v-for="item in options.patTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="患者姓名" prop="patientName">
          <el-input v-model="formData.patientName" clearable placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="申请单号" prop="ticketId">
          <el-input v-model="formData.ticketId" clearable placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="记录日期" prop="timeRange">
          <el-date-picker
            v-model="formData.timeRange"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            :clearable="false"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="m-l-0 click-button" size="small" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="ky-card ky-card-hdbg ky-mt10">
      <div class="content-title">
        <span>监听预约记录列表</span>
      </div>
      <el-table
        ref="appoTable"
        v-loading="loading"
        size="medium"
        :data="tableData"
        border
        highlight-current-row
        class="ky-table">
        <el-table-column prop="hospitalCode" label="医院名称" :formatter="frtHospCode" min-width="160"> </el-table-column>
        <el-table-column prop="applyHospitalCode" label="申请医院" :formatter="frtHospCode" min-width="160"> </el-table-column>
        <el-table-column prop="ticketId" label="申请单号" width="160"> </el-table-column>
        <el-table-column prop="doctor" label="申请医生" width="120"> </el-table-column>
        <el-table-column prop="sqdep" label="申请科室"> </el-table-column>
        <el-table-column prop="reason" label="无号源原因" width="260">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              title=""
              width="300"
              trigger="hover"
              :content="scope.row.reason">
              <div slot="reference" class="table_wrap">{{scope.row.reason}}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="患者姓名"> </el-table-column>
        <el-table-column prop="patType" label="患者类型"> </el-table-column>
        <el-table-column prop="dengjipart" label="检查部位" width="160"> </el-table-column>
        <el-table-column prop="checkpos" label="检查项目" width="160">
          <template slot-scope="scope">
            <el-popover
              placement="top-start"
              title=""
              width="300"
              trigger="hover"
              :content="scope.row.checkpos">
              <div slot="reference" class="table_wrap">{{scope.row.checkpos}}</div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="modality" label="检查设备"> </el-table-column>
        <el-table-column prop="price" label="金额"> </el-table-column>
        <el-table-column prop="appointmentType" label="预约来源"> </el-table-column>
        <el-table-column prop="operateUser" label="操作用户" width="120"> </el-table-column>
        <!-- <el-table-column prop="checktype" label="检查方式"> </el-table-column>
        <el-table-column prop="clinicend" label="临床诊断" width="160"> </el-table-column>
        <el-table-column prop="inpatientId" label="住院号"> </el-table-column>
        <el-table-column prop="wardno" label="病区"> </el-table-column>
        <el-table-column prop="sex" label="患者性别"> </el-table-column>
        <el-table-column prop="age" label="患者年龄"> </el-table-column>
        <el-table-column prop="telephone" label="患者电话" width="160"> </el-table-column>
        <el-table-column prop="bedno" label="床号"> </el-table-column>
        <el-table-column prop="jiuzhenjllsh" label="就诊流水号" width="200"> </el-table-column>
        <el-table-column prop="applyDatetime" label="申请单开单时间" width="160"> </el-table-column>
        <el-table-column prop="appointmentDate" label="最近可预约日期" width="160"> </el-table-column> -->
        <el-table-column prop="createTime" label="创建时间" width="160"> </el-table-column>
        <el-table-column label="操作" width="100" fixed="left">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click.stop="handleInfo(scope.$index, scope.row)"
              size="small"
            ><i class="el-icon-document"></i>详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <paginationCont
        :total="totalCount"
        :page.sync="currentPage"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 详情 -->
    <appoInfoDlg ref="appoInfoDlg"/>
  </div>
</template>

<script>
import { Options } from '@/utils/constant'
import { getAppointmentMonitorInfoGetPages } from '@/api/api'
import paginationCont from '@/components/Pagination/index'
import appoInfoDlg from './appoInfoDlg'
import { dateFormatter } from '@/utils/validate'
export default {
  components: {
    paginationCont,
    appoInfoDlg
  },
  data() {
    return {
      options: Options,
      loading: false,
      totalCount: 0,
      pageSize: 10,
      currentPage: 1,
      formData: {
        hospitalCode: '',
        patType: '',
        patientName: '',
        ticketId: '',
        timeRange: [dateFormatter(new Date(new Date() - 3600 * 1000 * 24 * 90), false), dateFormatter(new Date(), false)]
      },
      tableData: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  created() {
    this.$getHospitalList()
    this.formData.hospitalCode = this.$store.state.user.hospitalCode || this.mx_hospitalList[0].code
    this.search()
  },
  methods: {
    search() {
      this.currentPage = 1
      this.getList()
    },
    getList() {
      if (!this.formData.hospitalCode) {
        this.$message.warning('请选择医院')
        return
      }
      const params = {
        hospitalCode: this.formData.hospitalCode,
        patType: this.formData.patType,
        name: this.formData.patientName,
        ticketId: this.formData.ticketId,
        startDate: this.formData.timeRange ? this.formData.timeRange[0] : '',
        endDate: this.formData.timeRange ? this.formData.timeRange[1] : '',

        pageSize: this.pageSize,
        pageNumber: this.currentPage
      }
      this.loading = true
      getAppointmentMonitorInfoGetPages(params).then(async res => {
        this.loading = false
        if (res && res.code === 10000) {
          this.tableData = res.content.list
          this.totalCount = res.content.totalCount
        }
      }).catch(() => {
        this.loading = false
      })
    },
    // 详情
    handleInfo(index, row) {
      const info = { ...row }
      info.hospitalName = this.frtHospCode('', '', info.hospitalCode)
      info.applyHospitalName = this.frtHospCode('', '', info.applyHospitalCode)
      this.$refs.appoInfoDlg.show(info)
      this.$refs.appoTable.setCurrentRow(row)
    },
    // 关闭详情
    appoInfoDlgClose() {
      this.$refs.appoInfoDlg.handleClose()
    },
    // 格式化医院code
    frtHospCode(row, column, cellValue, index) {
      let name = ''
      let hospIndex = this.mx_hospitalList.findIndex(item => item.code === cellValue)
      if (hospIndex !== -1) {
        name = this.mx_hospitalList[hospIndex].name
      }
      return name
    }
  }
}
</script>

<style lang="scss" scoped>
.ky-container{
  min-height: calc(100vh - 100px);
  .content-title{
    margin-bottom: 10px;
    span{
      font-size: 16px;
      font-weight: 600;
    }
    .add-button{
      height: 32px;
      margin-left: 16px;
    }
  }
}
.table_wrap{
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
